<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>

<body>
</body>
<div id="container" >
<canvas id="canvas" width="1024" height="768" style=" background-image:url(bgImg3.jpg)">
</canvas>
</div>
<script type="text/javascript">
var ctx = document.getElementById("canvas").getContext("2d");
var plate = new Image();
var glove = new Image();
var v = 10;
function GameObject(){      
        this.x = 0;
        this.y = 0;      
        this.image = null;      
}   
function cartoon(){};
cartoon.prototype = new GameObject();
cartoon.prototype.hit = false;
var Plate = new cartoon();
var Glove = new cartoon();

var y;
var z;
var l = Math.ceil(Math.random()*150)+150;
var a = Math.ceil(Math.random()*1)+4;
var b = Math.sqrt(4*a*l);
var r = 0;
var p = (Math.ceil(Math.random()*2)+3);
var g = 2*Math.PI/200*(Math.ceil(Math.random()*8)-4);

plate.src = "plate.png";
Plate.image = plate;

glove.src = "glove.png";
Glove.image = glove;

var t=0;
var p = 0;

function plateFlow()
{
	ctx.clearRect(0,0,1024,768);
	Plate.y = 360;
	y= a*t*t-b*t;
	Plate.y += y;
	t +=0.8;
	
	Plate.x = 500;
	z= Math.sin(r)*400;
	Plate.x += z;
	r += g;
	
	ctx.drawImage(Plate.image,Plate.x,Plate.y);
	
	var v = 0.5;
	lastx = Glove.x;
	lasty = Glove.y;
	Glove.x = lastx*v + curx*(1-v);
	//Glove.y = lasty*v + cury*(1-v); 
	ctx.drawImage(Glove.image,Glove.x,Glove.y);
}

function gameLoop()
{
	plateFlow();
};

	var lastx = 0.0;
	var lasty = 0.0;
	var curx = 0.0;
	var cury = 0.0;
function AddEventHandlers()   
	{   
		$("#container").mousemove(function(e){  
			curx = e.pageX - (Glove.image.width/2) ;
			cury = e.pageY - (Glove.image.height/2);  
			
		}); 
	} 

setInterval(gameLoop,40);

$(window).ready(function(){    
		AddEventHandlers();
            screenWidth = parseInt($("#canvas").attr("width")); 
        Glove.x = parseInt(screenWidth/2)+30;
        Glove.y = 650;  

    });   
</script>
</html>
